<template>
  <div class="addr-page">
    <div class="addr-add">
      <div class="title">收货地址管理</div>
      <el-form :model="addr" ref="form" size="medium">
        <el-form-item
          ><div class="item">
            <div class="tit">档口名称：</div>
            <div class="input">
              <el-input
                placeholder="请输入..."
                v-model="addr.gate_name"
              ></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item
          ><div class="item">
            <div class="tit">收货人：</div>
            <div class="input">
              <el-input
                placeholder="请输入..."
                v-model="addr.contact"
              ></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item
          ><div class="item">
            <div class="tit">手机号：</div>
            <div class="input">
              <el-input placeholder="请输入..." v-model="addr.phone"></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item
          ><div class="item">
            <div class="tit">省市区：</div>
            <div class="input">
              <el-cascader
                class="input"
                size="medium"
                placeholder="省/市/区"
                :options="regionData"
                @change="regionChange"
                :value="region"
              >
              </el-cascader>
            </div>
          </div>
        </el-form-item>
        <el-form-item
          ><div class="item">
            <div class="tit">详细地址：</div>
            <div class="input">
              <el-input
                placeholder="门牌号、街道等..."
                v-model="addr.detail"
              ></el-input>
            </div>
          </div>
        </el-form-item>
        <!-- <el-form-item
          ><div class="item">
            <div class="tit">邮编：</div>
            <div class="input">
              <el-input
                placeholder="请输入..."
                v-model.number="addr.code"
              ></el-input>
            </div>
          </div>
        </el-form-item> -->
        <el-form-item
          ><div class="item">
            <div class="tit">默认地址：</div>
            <div class="input">
              <span @click="addr.is_default = addr.is_default ? 0 : 1"
                >设为默认</span
              >
              <el-checkbox
                v-model="addr.is_default"
                :true-label="1"
                :false-label="0"
              ></el-checkbox>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <el-button style="width: 160px" type="primary" @click="saveAddr">{{
        this.addr.id ? "保存" : "添加"
      }}</el-button>
      <el-button v-if="this.addr.id" style="width: 160px" @click="clearAddr"
        >取消</el-button
      >
    </div>
    <div class="addr-list">
      <div class="list-tit">
        <div class="gate_name">档口名称</div>
        <div class="name">收货人</div>
        <div class="phone">手机号</div>
        <div class="city">省市区</div>
        <div class="addr">详细地址</div>
        <div class="code">邮编</div>
        <div class="action">操作</div>
      </div>
      <div class="addr-item" v-for="(item, index) in addrList" :key="index">
        <div class="gate_name">{{ item.gate_name }}</div>
        <div class="name">{{ item.contact }}</div>
        <div class="phone">{{ item.phone }}</div>
        <div class="city">
          {{ item.province + "/" + item.city + "/" + item.area }}
        </div>
        <div class="addr">{{ item.detail }}</div>
        <div class="code">--/--</div>
        <div class="action">
          <span @click="delAddr(item.id)">删除</span>
          <span @click="editAddr(item)">编辑</span>
          <a @click="setDefault(item)" :class="{ active: item.is_default }">
            默认地址
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import verify from "@/libs/util.verify";
import api from "@/api";
import { mapState } from "vuex";
import { regionData, TextToCode, CodeToText } from "element-china-area-data";

let defaultAddr = {
  gate_name: "", // 档口名称
  province: "", // 省份
  city: "", // 城市
  area: "", // 区域
  code: "", // 区域代码
  detail: "", // 详细地址
  contact: "", // 联系人
  phone: "", // 电话
  is_default: 0,
};
export default {
  name: "UserAddr",
  computed: {
    ...mapState("user", ["userinfo"]),
    region() {
      try {
        return [
          TextToCode[this.addr.province].code,
          TextToCode[this.addr.province][this.addr.city].code,
          TextToCode[this.addr.province][this.addr.city][this.addr.area].code,
        ];
      } catch (err) {
        return [];
      }
    },
  },
  data() {
    return {
      regionData: regionData,
      addrList: [1, 2, 3, 4, 5],
      addr: Object.assign({}, defaultAddr),
    };
  },
  created() {
    this.getAddrList();
  },
  methods: {
    async saveAddr() {
      let errMsg = this.verifyAddr(this.addr);
      if (errMsg) return this.$message.error(errMsg);
      if (!this.addr.id) {
        await api.ADDR_ADD(this.addr);
        this.$message.success("添加成功");
        this.clearAddr();
        this.getAddrList();
      } else {
        await api.ADDR_EDIT(this.addr);
        this.$message.success("保存成功");
        this.clearAddr();
        this.getAddrList();
      }
    },
    async delAddr(id) {
      await api.ADDR_DEL(id);
      this.getAddrList();
    },
    editAddr(item) {
      this.addr = Object.assign({}, defaultAddr, item);
    },
    clearAddr() {
      delete this.addr.id;
      Object.assign(this.addr, defaultAddr);
    },
    verifyAddr(data) {
      if (verify.isEmpty(data.gate_name)) return "档口名称不能为空";
      else if (verify.isEmpty(data.province)) return "省份不能为空";
      else if (verify.isEmpty(data.city)) return "城市不能为空";
      else if (verify.isEmpty(data.area)) return "区域不能为空";
      else if (verify.isEmpty(data.detail)) return "详细地址不能为空";
      else if (verify.isEmpty(data.contact)) return "联系人不能为空";
      else if (verify.isEmpty(data.phone)) return "手机号码不能为空";
      else if (!verify.isPhone(data.phone)) return "手机号格式有误";
      else return "";
    },
    async getAddrList() {
      let result = await api.ADDR_LIST();
      this.addrList = result;
    },
    regionChange(region) {
      this.addr.code = region;
      this.addr.province = CodeToText[region[0]];
      this.addr.city = CodeToText[region[1]];
      this.addr.area = CodeToText[region[2]];
    },
    async setDefault(addr) {
      if (!addr.is_default) {
        addr.is_default = 1;
        await api.ADDR_EDIT(addr);
        this.$message.success("设置成功");
        this.getAddrList();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.addr-page {
  .addr-add {
    border: 1px solid #dedede;
    padding: 20px;
    .title {
      margin-bottom: 28px;
      font-size: 20px;
      font-weight: 600;
      color: #333333;
      line-height: 28px;
    }
    .item {
      display: flex;
      .tit {
        width: 70px;
        font-size: 14px;
        color: #333333;
        line-height: 36px;
        margin-right: 12px;
      }
      .input {
        width: 260px;
        text-align: right;
        span {
          cursor: pointer;
          padding-right: 10px;
          font-size: 14px;
          color: #333333;
        }
        ::v-deep .el-checkbox__inner {
          border-radius: 50%;
        }
        &.update {
          width: 96px;
          flex-direction: column;
          display: flex;
          justify-content: center;
          align-items: center;
          .image {
            width: 70px;
            height: 70px;
            margin: 0 auto 10px;
            background: #ffffff;
            border: 1px solid #c7c7c7;
            border-radius: 50%;
            overflow: hidden;
          }
          .button {
          }
        }
      }
    }
  }
  .addr-list {
    margin-top: 20px;
    .list-tit {
      height: 36px;
      background: #f3f5f9;
      border: 1px solid #f0f0f0;
      display: flex;
      align-items: center;
      font-size: 16px;
      color: #333333;
      .name {
        width: 48px;
        padding: 0 43px 0 20px;
      }
      .gate_name {
        width: 80px;
        padding: 0 0 0 15px;
      }
      .phone {
        width: 48px;
        padding-right: 70px;
      }
      .city {
        width: 48px;
        padding-right: 80px;
      }
      .addr {
        width: 64px;
        padding-right: 190px;
      }
      .code {
        width: 32px;
        padding-right: 58px;
      }
    }
    .addr-item {
      display: flex;
      height: 84px;
      align-items: stretch;
      border: 1px solid #dedede;
      .gate_name {
        width: 100px;
        box-sizing: border-box;
        border-right: 1px solid #dedede;
        display: flex;
        align-items: center;
        padding-left: 20px;
      }
      .name {
        width: 100px;
        box-sizing: border-box;
        border-right: 1px solid #dedede;
        display: flex;
        align-items: center;
        padding-left: 20px;
      }
      .phone {
        width: 128px;
        box-sizing: border-box;
        border-right: 1px solid #dedede;
        display: flex;
        align-items: center;
        padding-left: 10px;
      }
      .city {
        width: 121px;
        box-sizing: border-box;
        border-right: 1px solid #dedede;
        display: flex;
        align-items: center;
        padding-left: 20px;
      }
      .addr {
        width: 299px;
        box-sizing: border-box;
        border-right: 1px solid #dedede;
        display: flex;
        align-items: center;
        padding: 0 10px;
      }
      .code {
        width: 79px;
        box-sizing: border-box;
        border-right: 1px solid #dedede;
        display: flex;
        align-items: center;
        padding: 0 10px;
      }
      .action {
        flex: 1;
        display: flex;
        align-items: center;
        padding: 0 20px;
        margin-left: 4px;
        span {
          padding-right: 20px;
          cursor: pointer;
        }
        a {
          width: 80px;
          height: 22px;
          font-size: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 13px;
          color: #d52c1a;
          background: #ffffff;
          cursor: pointer;
          &.active {
            color: #ffffff;
            background: #d52c1a;
          }
        }
      }
    }
  }
}
</style>
